﻿@page "/admin/pingback"
@using Moonglade.Pingback
@inject IMediator Mediator
@{
    ViewBag.Title = "Pingback";
    var pingbackRecords = await Mediator.Send(new GetPingbacksQuery());
}

@Html.AntiForgeryToken()

@section head {
    <style>
        .pingbacks-container {
            height: calc(100vh - 230px);
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .pingback-item {
            border-bottom: 1px solid #CECECE;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
    </style>
}

@section scripts{
    <script type="module">
        import * as utils from '/js/app/utils.module.js'

        window.deletePingback = function(pingbackId) {
            callApi(`/pingback/${pingbackId}`, 'DELETE', {},
                (resp) => {
                    document.querySelector(`#pingback-box-${pingbackId}`).remove();
                });
        }

        window.clearPingback = function() {
            callApi(`/pingback/clear`, 'DELETE', {},
                (resp) => {
                    blogToast.success('Pingback logs are cleared');
                    setTimeout(function () {
                        window.location.reload();
                    }, 800);
                });
        }

        utils.formatUtcTime();
    </script>
    <script>
        $("#pingFilter").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $(".pingbacks-container .pingback-item").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    </script>
}


<div class="admin-toolbar ps-4 pe-4 pt-2 pb-2 border-bottom mb-3 shadow-sm">
    <div class="row">
        <div class="col">
            <a class="btn btn-outline-danger" href="javascript:;" data-bs-toggle="modal" data-bs-target="#clearpingbackModal">
                <i class="bi-trash"></i>
                @SharedLocalizer["Clear all"]
            </a>
        </div>
        <div class="col-auto">
            <div class="text-muted admin-toolbar-text">
                <span id="pingback-count">@pingbackRecords.Count</span> item(s)
            </div>
        </div>
    </div>
</div>

<div class="ps-4 pe-4">
    <input id="pingFilter" type="text" class="form-control mb-3" maxlength="32" placeholder="Filter..">

    <div class="pingbacks-container">
        @foreach (var item in pingbackRecords.OrderByDescending(p => p.PingTimeUtc))
        {
            <div id="pingback-box-@item.Id" class="pingback-item row">
                <div class="col">
                    <strong>
                        <a href="@item.SourceUrl" target="_blank">@item.SourceTitle</a>
                    </strong>

                    <div>
                        <i class="bi-link"></i>

                        @item.TargetPostTitle
                    </div>

                    <div class="text-muted">
                        @item.Domain, @item.SourceIp,
                        <time data-utc-label="@item.PingTimeUtc.ToString("u")">@item.PingTimeUtc</time>
                    </div>
                </div>

                <div class="col-auto">
                    <a class="btn btn-sm btn-outline-danger btn-delete" href="javascript:window.deletePingback('@item.Id');">
                        <i class="bi-trash"></i>
                    </a>
                </div>
            </div>
        }
    </div>
</div>

<div class="modal fade" id="clearpingbackModal" tabindex="-1" role="dialog" aria-labelledby="clearpingbackModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clearpingbackModalLabel">@SharedLocalizer["Clear Pingback Logs"]</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                @SharedLocalizer["Are you sure?"]
            </div>
            <div class="modal-footer">
                <a href="javascript:clearPingback();" class="btn btn-outline-danger btn-clear">@SharedLocalizer["Clear Now"]</a>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">@SharedLocalizer["Cancel"]</button>
            </div>
        </div>
    </div>
</div>